import "./batchLogin.scss";
import { Table } from "@/components/table/table";
import { THead } from "@/components/table/thead";
import { TBody } from "@/components/table/tbody";
import { Tr } from "@/components/table/tr";
import { Td } from "@/components/table/td";
import { useMemo } from "react";
import { encryptEmail } from "@/utils/reg";
import dayjs from "dayjs";

export const BatchLogin = ({ loginData }): React.ReactElement => {
  sessionStorage.setItem("batch_login_data", loginData);

  const setErrorElement = (code) => {
    if (code === 1) {
      return <span className="login_code_element t">登录成功</span>;
    }
    if (code === 0) {
      return <span className="login_code_element t">登录中</span>;
    }
    return <span className="login_code_element f">登录异常</span>;
  };

  const loginTableElement = useMemo(() => {
    return (
      <Table>
        <THead>
          <Tr>
            <Td>ID</Td>
            <Td>用户名</Td>
            <Td>密码</Td>
            <Td>邮箱地址</Td>
            <Td>发布视频</Td>
            <Td>登录时间</Td>
            <Td>授权时间</Td>
            <Td>状态</Td>
          </Tr>
        </THead>
        <TBody>
          {(loginData as any[])?.map((item, index) => (
            <Tr key={index}>
              <Td>{item.id}</Td>
              <Td>{item.account}</Td>
              <Td>--</Td>
              <Td>{encryptEmail(item.email)}</Td>
              <Td>0</Td>
              <Td>{dayjs(new Date()).format("YYYY-MM-DD")}</Td>
              <Td>{item.authtime ? item.authtime : "--"}</Td>
              <Td>{setErrorElement(item.logincode)}</Td>
            </Tr>
          ))}
        </TBody>
      </Table>
    );
  }, [loginData]);

  return <>{loginTableElement}</>;
};
// {
//   isActive == -1 && (
//     <>
//       <div className="dashboard_svg_box">
//         <div className="svg_item" onClick={() => setIsShow(!isShow)}>
//           <Setting />
//         </div>
//       </div>

//       {/* 标题 */}
//       <div className="dashboard_title">
//         <div className="dashboard_day">
//           <p>
//             稳定运行时长<span className="day_main">00999</span>天
//           </p>
//         </div>
//         <div className="dashboard_main">
//           <h3>运营数据</h3>
//         </div>
//         <div className="dashboard_time">
//           <span>{<IntervalDayjs />}</span>
//         </div>
//       </div>

//       {/* 账号大体数据 */}
//       <div className="dashboard_info">
//         {infoList.map((item, index) => (
//           <Card className="dashboard_info_list" key={index}>
//             <div className="dashboard_info_item_title">{item.name}</div>
//             <div className="dashboard_info_child">
//               <span>{item.data}</span>
//               <span className="dashboard_info_unit">{item.unit}</span>
//             </div>
//           </Card>
//         ))}
//       </div>

//       {/* 列表与可视化渲染 */}
//       <div className="dashboard_table_info">
//         {/* 左侧数据 */}
//         <Card className="dashboard_left_table">
//           <div className="dashboard_table_title_box">
//             <div className="dashboard_left_border"></div>
//             <div className="dashboard_table_title">
//               各数据库收益统计
//             </div>
//           </div>
//           <Table>
//             <THead>
//               <Tr color="#291895">
//                 <Td>序列号</Td>
//                 <Td>收益</Td>
//                 <Td>开箱次数</Td>
//                 <Td>平均收益</Td>
//                 <Td>账号数</Td>
//                 <Td>设备数</Td>
//               </Tr>
//             </THead>
//             {/* <TBody> */}
//             {/* {indexTable &&
//               indexTable.map((item: IndexTable, index: number) => (
//                 <Tr
//                   key={index}
//                   color={index % 2 === 0 ? "#311382" : "#291895"}
//                 >
//                   <Td>{item.serial}</Td>
//                   <Td>{item.income}</Td>
//                   <Td>{item.crate_num}</Td>
//                   <Td>{(item.income / item.crate_num).toFixed(2)}</Td>
//                   <Td>{item.account_num}</Td>
//                   <Td>{item.device_num}</Td>
//                 </Tr>
//               ))} */}
//             {/* </TBody> */}
//           </Table>
//         </Card>

//         {/* 中间侧以及数据统计 */}

//         <div className="dashboard_middle_table">
//           {/* <Card className="dashboard_middle_top">
//           {statistics.map((item, index) => (
//             <div className="middle_top_item" key={index}>
//               <div className="dashboard_info_item_title">
//                 {item.name}
//               </div>
//               <div className="dashboard_info_child">
//                 <span>{item.data}</span>
//                 <span className="dashboard_info_unit">{item.unit}</span>
//               </div>
//             </div>
//           ))}
//         </Card> */}

//           <div className="dashboard_middle_middle">
//             <div className="dashboard_middle_middle_box">
//               <p className="title">
//                 本月收益<span>月</span>
//               </p>
//               <p className="dashboard_sum">
//                 {/* {statisticsData?.month} */}
//                 <span>个</span>
//               </p>
//             </div>
//             <div className="dashboard_middle_middle_box">
//               <p className="title">
//                 本周收益<span>周</span>
//               </p>
//               <p className="dashboard_sum">
//                 {/* {statisticsData?.week} */}
//                 <span>个</span>
//               </p>
//             </div>
//           </div>
//           <Card className="dashboard_middle_bottom">
//             <div className="dashboard_border">
//               <div className="dashboard_border_right" />
//               <p>近七日总收益</p>
//             </div>
//             {/* <DataEcharts /> */}
//           </Card>
//         </div>
//         <div className="dashboard_right_table">
//           <RightTable />
//         </div>
//       </div>
//     </>
//   );
// }
